SCE Tracking Script

Installation

Fill places marked with comments and add our script to <head> tag of all of your views.

<script>
  (function(baseUrl, apiKey, sid, options) {
    var options = options || { debug: false, attachEvents: [], ignoreTypeAttributes: [], ignoreNameAttributes: [] };
    window.sce = {
      CODES_V: "0.4",
      writeKey: apiKey,
      baseUrl: baseUrl,
      sid: sid,
      buffer: [],
      ignoreTypeAttributes: options.ignoreTypeAttributes,
      ignoreNameAttributes: options.ignoreNameAttributes,
      debug: options.debug,
      attachEvents: options.attachEvents,
      permissionCookieName: "accept",
      event: function(eventType, args) {
          if (sce.sendData) {
              sce.sendData(eventType, args, null, "SCENARIO_NAME");
          } else {
              sce.buffer.push([
                  1 * new Date(),
                  eventType,
                  args
              ]);
          }
      }
    };
    var sceScript = document.createElement("script");
    sceScript.type = "text/javascript";
    sceScript.async = true;
    sceScript.src = baseUrl + 'scripts/sendData.min.js';
    var otherScriptTag = document.getElementsByTagName("script")[0];
    otherScriptTag.parentNode.insertBefore(sceScript, otherScriptTag);
  })("APP_BASE_URL", "APP_TOKEN", "sid", { debug: false, attachEvents: [ "optionalEvent" ], ignoreTypeAttributes: ["password"], ignoreNameAttributes:["optionalIgnoredAttributeName"] }); // change url to sce url, add api key, customer id and options
</script>

Parameters

SCENARIO_NAME - name of scenario you want to use or empty if you want to use scenario www_events
APP_BASE_URL - application base url, e.g. http://localhost:9002/
APP_TOKEN - application authentication token

Tracking permission

By default our script doesn't start working unless tracking permission is granted, e.g.:

<button onclick="sce.grantTrackingPermission()" type="button">Accept tracking</button>

Use

Our script gathers information about following events automatically:

time spent on page (sent in intervals(0, 5, 30, 60, 300, 900(seconds)) and with every event
page view,
scroll value,
mouse move (it sends cursor position with 0,5s interval) - optional (you can turn it on adding key/value pair - attachEvents: [ "mousePosition" ] to options object in our script),
click(on button or link),
input values after every character provided,
text pasted to input,
select change,
radio change,
checkbox check,
input characters count

To send your own event you can use sce.event() function:

sce.event("eventCategory", {
  eventLabel: [eventLabel],
  eventValue: [eventValue]
});

First argument is the name of the table in which the information will be stored. That is why the object which is being sent should have the same properties for equal first arguments of function event. For example:

sce.event("Input_click", {
  id: event.target.id,
  name: event.target.name,
  value: event.target.value
});

Variables

Computed variables to use in your app:

Variable	Type	Description	Example
sce.pageHeight	integer	height of a page (in pixels)	1500
sce.maxScrollY	integer	height of a page reached by user	890
sce.timeSpentOnPage	integer	time spent on a page (in seconds)	30
sce.currentCursorPostition	object	current position of a cursor (pixels)	{ x: 358, y: 781 }
sce.inputCharacters	object	number of characters provided on input	{ firstName : 5, lastName: 10 }

Ignoring attributes from being tracked

By default inputs with 'password' attribute type are not tracked.
Other attribute types can also be ignored by specifying them in the script settings:

ignoreTypeAttributes: ["password", "text"]

Elements can also be ignored by their name:

ignoreNameAttributes:["optionalIgnoredAttributeName"]

Examples of use

Input edition

Add event listener to send information about input after edition:

<input type="text" name="FirstName" onFocusOut="sce.event('Inputs', { action: "input_edition", id: event.target.id, name: event.target.name, value: event.target.value, enteredCharacters: sce.inputCharacters[event.target.id] })">

OR

window.addEventListener("focusout", event => {
  if (event.target.tagName === "INPUT") {
    sce.event("input_edition", {
      id: event.target.id,
      name: event.target.name,
      value: event.target.value,
      enteredCharacters: sce.inputCharacters[event.target.id]
    });
  }
});

Clicks

Given:

<a id="googleLink" href="http://google.com">Go to google!!!</a>

To send information about link that user clicked you can add onClick attribute to <a> tag:

<a id="googleLink" href="http://google.com" onClick="sce.event("link_click", {
    linkId: event.target.id,
    linkName: event.target.innerHTML
    href: event.target.href
  });">
    Go to google!!!
</a>

OR Add event listener to your script:

window.addEventListener("click", event => {
    if (event.target.tagName === "A") {
      sce.event("link_click", {
        linkId: event.target.id,
        linkName: event.target.innerHTML
        href: event.target.href
      });
    }
});

Time spent on page and page view

let intervals = [0, 5000, 30000, 60000, 300000, 900000];
window.addEventListener("load", function() {
  intervals.forEach(function(interval) {
    const sendTime = setTimeout(
      () =>
        sce.event("time_spent_on_page", {
          value: sce.timeSpentOnPage
        }),
      interval
    );
  });
  sce.event("page_view", { value: window.location.href });
});

Scroll

window.addEventListener("scroll", event => {
  window.clearTimeout(sendScrollEvent);
  sendScrollEvent = setTimeout(function() {
    sce.event("scroll", {
      scroll_position_Y: sce.maxScrollY,
      scroll_position_Y_max: sce.pageHeight
    });
  }, 1000);
});